<template>
  <div class="base-video">
    <div class="check-list-box">
      <div class="check-item" v-for="(item, index) in checkList" :key="index">
        <label>
          <input type="checkbox" :name="item.name" v-model="item.value" @change="changeCheck(item, index)">{{ item.name
          }}
        </label>
        <br>
      </div>
    </div>
    <div class="player-list-box">
      <div :id="`${item.type}-${item.id}`" class="player-item" v-for="(item, index) in playerList" :key="index">
        {{ item.id }}
        <FlvPlayer v-if="item.type === 'flvPlayer'" />
        <HlsPlayer v-if="item.type === 'HlsPlayer'" />
        <WebRTC v-if="item.type === 'WebRTC'" />
        <EasyWebRTC v-if="item.type === 'EasyPlayerPro'" ref="easyWebRTCRef" :videoUrl="item.url" />
      </div>
    </div>
    <div>
      <div class="video-box">
        <p> {{ counterStore.uavVideoUrl }}</p>
        {{ counterStore.uavId }}
        <EasyWebRTC v-if="isShowUavVideo" ref="uavVideoRef" :videoUrl="UavUrl" />
      </div>
      <div class="video-box">
        <p> {{ counterStore.nestVideoUrl }}</p>
        {{ counterStore.nestId }}
        <EasyWebRTC v-if="isShowNestVideo" ref="nestVideoRef" :videoUrl="NestUrl" />
      </div>
    </div>
  </div>
</template>

<script>

import FlvPlayer from "../components/FlvPlayer.vue";
import HlsPlayer from "../components/HlsPlayer.vue";
import WebRTC from "../components/WebRTC.vue";
import EasyWebRTC from "../components/EasyWebRTC.vue";

import { nextTick } from 'vue';
import { useCounterStore } from '../stores/counter.js'

export default {
  name: 'BaseVideo',
  setup () {
    // 实例化 store
    const counterStore = useCounterStore();
    console.log('counterStore->', counterStore);
    // 将 store 返回，以便在模板中使用
    return {
      counterStore,
    };
  },
  components: {
    FlvPlayer,
    HlsPlayer,
    WebRTC,
    EasyWebRTC,
  },
  data () {
    return {
      videoUrl: 'rtmp://192.168.1.103:1935/live/test',
      playerList: [],
      checkList: [
        {
          name: 'flvPlayer',
          type: 'flvPlayer',
          url: 'ws://192.168.1.103:8081/live/test',
          id: 'AWZ001',
          value: false
        },
        {
          name: 'WebRTC',
          type: 'WebRTC',
          url: 'ws://192.168.1.103:8081/live/test',
          id: 'AWZ002',
          value: false
        },
        {
          name: 'EasyPlayerPro-CS-214',
          type: 'EasyPlayerPro',
          url: 'webrtc://183.234.52.92:9907/index/api/webrtc?app=pinggu&stream=CS-214&type=play',
          id: 'CS-214',
          value: false
        },
        {
          name: 'EasyPlayerPro-CS-215',
          type: 'EasyPlayerPro',
          url: 'webrtc://183.234.52.92:9907/index/api/webrtc?app=pinggu&stream=CS-215&type=play',
          id: 'CS-215',
          value: false
        },
        {
          name: 'EasyPlayerPro',
          type: 'EasyPlayerPro',
          url: 'ws://192.168.1.103:8081/live/test',
          id: 'AWZ003-3',
          value: false
        },
        {
          name: 'EasyPlayerPro',
          type: 'EasyPlayerPro',
          url: 'ws://192.168.1.103:8081/live/test',
          id: 'AWZ003-4',
          value: false
        },
        {
          name: 'HlsPlayer',
          type: 'HlsPlayer',
          url: 'ws://192.168.1.103:8081/live/test',
          id: 'AWZ004',
          value: false
        }
      ]
    }
  },
  methods: {
    // 动态创建播放器的容器节点
    createPlayerContainer (item, num) {
      let that = this
      let parentEle = document.getElementById(`${item.type}-${item.id}`)
      if (parentEle && parentEle.childNodes) {
        parentEle.childNodes.forEach(element => {
          if (element.id === 'player_box1') {
            element.id = `${item.type}-${item.id}-${num}`
          }
        });
      }
    },
    changeCheck (item, index) {
      if (item.value) {
        this.playerList.push(item)
      } else {
        this.playerList.splice(this.playerList.indexOf(item), 1)
      }
      this.counterStore.setNestId('Nest-001')
      nextTick(() => {
        console.log('this.playerList->', this.playerList);
        console.log('ref->', this.$refs.easyWebRTCRef);

        if (this.$refs.easyWebRTCRef.length !== 0) {
          this.createPlayerContainer(item, index)
        }
      });
    }
  }
}
</script>

<style>
.video-box {
  width: 200px;
  height: 150px;
  position: revert;
  border: solid 1px #000;
  margin: 5px;
}

.base-video {
  width: 100%;
  display: flex;
}

.check-list-box {
  display: inline;
  width: 300px;
  height: 71vh;
  border: solid 1px #000;
}

.check-item {
  height: 40px;
  line-height: 40px;
  border-bottom: solid 1px #212121;
  user-select: none;
}

.player-list-box {
  display: flex;
  width: 1000px;
  height: calc(71vh - 10px);
  border: solid 1px #000;
  border-left: none;
  padding: 5px;
}

.player-item {
  height: 200px;
  width: 300px;
  border: solid 1px #212121;
}
</style>
